<template>
  <div class="m-combine-date-picker-wrap">
    <div class="m-combine-date-picker-item">
      <el-date-picker
        v-model="dateTimeStart"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY/MM/DD ddd"
        time-format="A hh:mm:ss"
        @change="dateTimeChange($event, 'start_ts')"
      />
    </div>

    <div class="m-combine-date-picker-item">
      <el-date-picker
        v-model="dateTimeEnd"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY/MM/DD ddd"
        time-format="A hh:mm:ss"
        @change="dateTimeChange($event, 'end_ts')"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { dateTransToSeoulTime } from '@/utils/util';

const props = defineProps({
  dateTimeRange: {
    type: Object,
    required: true
  }
});

const emits = defineEmits(['changeHandle']);

const dateTimeStart = ref(0);
const dateTimeEnd = ref(0);

onMounted(() => {
  dateTimeStart.value = props.dateTimeRange[0] * 1000;
  dateTimeEnd.value = props.dateTimeRange[1] * 1000;
});

const dateTimeChange = (date: any, type: string) => {
  const timestamp = dateTransToSeoulTime(date);
  emits('changeHandle', timestamp, type);
};
</script>

<style lang="scss" scoped>
.m-combine-date-picker-wrap {
  display: flex;
}

.m-combine-date-picker-item {
  margin-right: 10px;
}
</style>
